<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>培训视频</title>
    <style>
      @media (min-width: 769px) {
        #app {
          margin: 64px;
        }

        .breakcrumb {
          font-size: 28px;
          color: #676a6c;
        }

        .breakcrumb a {
          color: #676a6c;
          cursor: pointer;
          text-decoration: none;
        }

        h1 {
          font-size: 32px;
        }

        .content-list {
          counter-reset: item-counter;
        }

        .content-list .item {
          line-height: 48px;
          counter-increment: item-counter; /* 计数器递增 */
          position: relative;
        }

        .content-list .item::before {
          content: counter(item-counter) '.'; /* 使用计数器的值作为内容 */
          position: absolute;
          left: 0; /* 调整序号位置 */
          color: #11a8cd;
          font-size: 24px;
        }

        .content-list .item {
          font-weight: 500;
          color: #11a8cd;
          text-decoration: none;
          padding-left: 32px;
          font-size: 24px;
          cursor: pointer;
        }

        iframe {
          width: 700px;
          height: 500px;
          padding: 20px 0;
        }
      }

      @media (max-width: 768px) {
        #app {
          margin: 1.6rem 1.6rem 1.6rem 1.6rem;
        }

        .breakcrumb {
          font-size: 1rem;
          color: #676a6c;
        }

        .breakcrumb a {
          color: #676a6c;
          cursor: pointer;
          text-decoration: none;
        }

        h1 {
          font-size: 1.4rem;
          margin: 1.2rem 0 1rem 0;
        }

        .content-list {
          counter-reset: item-counter;
        }

        .content-list .item {
          line-height: 1.8rem;
          counter-increment: item-counter; /* 计数器递增 */
          position: relative;
        }

        .content-list .item::before {
          content: counter(item-counter) '.'; /* 使用计数器的值作为内容 */
          position: absolute;
          left: 0; /* 调整序号位置 */
          color: #11a8cd;
        }

        .content-list .item {
          font-weight: 500;
          color: #11a8cd;
          text-decoration: none;
          padding-left: 1.2rem;
          cursor: pointer;
        }

        iframe {
          width: 100%;
          padding: 1rem 0;
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="breakcrumb">
        <a href="/xuanjing">首页</a> > <span>培训视频</span>
      </div>
      <h1>玄镜平台开发资料</h1>
      <div id="video-content">
        <iframe
          id="iframe"
          src="//player.bilibili.com/player.html?aid=577826876&bvid=BV1Nz4y1N7ni&cid=1316962658&p=1"
          scrolling="no"
          allowfullscreen="true"
          framespacing="0"
          frameborder="0"
        ></iframe>
      </div>
      <div class="content-list">
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=577826876&bvid=BV1Nz4y1N7ni&cid=1316962658&p=1"
        >
          平台介绍-新建工程
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=875287106&bvid=BV11N4y1k7Y7&cid=1316962579&p=1"
        >
          平台介绍-新建工程-2
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=920334598&bvid=BV1Eu4y1J7Y2&cid=1316962580&p=1"
        >
          工程树
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=235368073&bvid=BV1Ze411972j&cid=1316962197&p=1"
        >
          几何-1
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=962872291&bvid=BV1jH4y1z7Wv&cid=1316962587&p=1"
        >
          几何-2
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=407838003&bvid=BV1cG411y724&cid=1316962680&p=1"
        >
          建模
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=832776049&bvid=BV1ng4y1o7cM&cid=1316962590&p=1"
        >
          Mesh
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=620366548&bvid=BV1f84y1X7He&cid=1316962593&p=1"
        >
          平台对象
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=277802839&bvid=BV1pc411f7kQ&cid=1316962710&p=1"
        >
          文本块-1
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=235251448&bvid=BV1ee41197cH&cid=1316962805&p=1"
        >
          文本块-2
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=747791155&bvid=BV1mC4y1n7cp&cid=1316962720&p=1"
        >
          表格
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=962856152&bvid=BV1nH4y1z7CL&cid=1316962814&p=1"
        >
          标注
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=535327602&bvid=BV1qM411D7L3&cid=1316962726&p=1"
        >
          工程与场景
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=920326025&bvid=BV15u4y1J7Kp&cid=1316962906&p=1"
        >
          场景参照
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=875326192&bvid=BV1LN4y167cV&cid=1316962914&p=1"
        >
          放置与修改命令
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=577821492&bvid=BV1wz4y1N7ax&cid=1316962922&p=1"
        >
          属性机制
        </div>

        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=747845307&bvid=BV1VC4y1H7gF&cid=1316962737&p=1"
        >
          动态属性
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=280354425&bvid=BV1nc411d7NS&cid=1316962835&p=1"
        >
          材质
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=747867210&bvid=BV1EC4y1H78U&cid=1316962838&p=1"
        >
          样式填充
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=662800291&bvid=BV1Ha4y1X7r1&cid=1316962949&p=1"
        >
          图层
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=790359437&bvid=BV1ey4y1A7Rr&cid=1316962956&p=1"
        >
          路线
        </div>
        <div
          class="item"
          data-url="//player.bilibili.com/player.html?aid=535319045&bvid=BV1eM411D714&cid=1316962749&p=1"
        >
          地质
        </div>
      </div>
    </div>
    <script type="text/javascript">
      // 获取所有的.item元素
      var items = document.querySelectorAll('.item');
      // 获取iframe元素
      var iframe = document.getElementById('iframe');
      // 遍历每个.item元素，并为它们添加点击事件处理程序
      items.forEach(function (item) {
        item.addEventListener('click', function () {
          // 获取当前点击项的data-url属性值
          var url = item.getAttribute('data-url');
          // 更新iframe的src属性，显示相应的视频
          iframe.src = url;
        });
      });
    </script>
  </body>
</html>
